<style scoped lang="less">
  @import "../../less/switch.less";
</style>
<template>
  <div>
    <!-- 搜索 -->
    <el-form :model="formItem"  label-width="80px" :inline="true" class="demo-form-inline">
      <el-form-item label="状态">
        <el-select v-model="formItem.status" placeholder="请选择" clearable="">
          <el-option label="已兑奖" value="1"></el-option>
          <el-option label="未兑奖" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="formItem.type" placeholder="请选择" clearable="">
          <el-option label="中奖用户名称" value="1"></el-option>
          <el-option label="奖品名称" value="2"></el-option>
        </el-select>
        <el-input v-model="formItem.keyword" placeholder="关键字" style="width:200px;" clearable=""></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker v-model="formItem.start_time" type="datetime" placeholder="选择日期时间" clearable=""></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="formItem.end_time" type="datetime" placeholder="选择日期时间" clearable=""></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 10px;">
      <el-button @click.native="exports()" type="primary" size="small" icon="el-icon-download">导出</el-button>
      <el-button @click="handreturn()" type="default" size="mini">返回</el-button>
    </div>
    <el-table ref="selection" :data="listData" border tooltip-effect="dark" style="width: 100%"  @selection-change="select">
      <el-table-column fixed type="selection" width="55"></el-table-column>
      <el-table-column prop="user" label="中奖用户" width="200">
        <el-table-column prop="name" label="姓名" width="120">
          <template slot-scope="scope">
            {{scope.row.user ? scope.row.user.name : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="手机" width="120">
          <template slot-scope="scope">
            {{scope.row.user ? scope.row.user.mobile : ''}}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="activity_name" label="活动名称" width="300">
        <template slot-scope="scope">
          {{scope.row.activity ? scope.row.activity.name : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="goods_name" label="中奖奖品" show-overflow-tooltip width="300">
        <el-table-column prop="name" label="奖品" width="120">
          <template slot-scope="scope">
            {{scope.row.goods ? scope.row.goods.name : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="award_name" label="奖品分类名" width="120"> </el-table-column>
      </el-table-column>
      <el-table-column label="领奖信息">
        <el-table-column prop="name" label="手机" width="120">
          <template slot-scope="scope">
            {{scope.row.draw_data ? scope.row.draw_data.mobile : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="联系人" width="120">
          <template slot-scope="scope">
            {{scope.row.draw_data ? scope.row.draw_data.username : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
          <template slot-scope="scope">
            {{scope.row.draw_data ? scope.row.draw_data.address : ''}}
          </template>
        </el-table-column>
        <!--<el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
            <template slot-scope="scope">
              {{scope.row.draw_data ? scope.row.draw_data.province : ''}}
            </template>
          </el-table-column>
          <el-table-column prop="city" label="市" width="120">
            <template slot-scope="scope">
              {{scope.row.draw_data ? scope.row.draw_data.city : ''}}
            </template>
          </el-table-column>
          <el-table-column prop="city" label="区" width="120">
            <template slot-scope="scope">
              {{scope.row.draw_data ? scope.row.draw_data.district : ''}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
            <template slot-scope="scope">
              {{scope.row.draw_data ? scope.row.draw_data.address : ''}}
            </template>
          </el-table-column>
        </el-table-column>-->
      </el-table-column>

      <el-table-column prop="created_at" label="中奖时间" width="300"></el-table-column>
      <el-table-column prop="status" label="兑换状态" width="300">
        <template slot-scope="scope">
          {{scope.row.status===1 ? '已兑奖' : '未兑奖'}}
        </template>
      </el-table-column>
      <el-table-column prop="draw_time" label="兑换时间" width="200"></el-table-column>
      <el-table-column fixed="right" label="操作" width="260">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status == 2" @click.native.prevent="prize(scope.$index)" type="primary" size="mini">兑奖</el-button>
          <el-button v-else type="primary" disabled="" size="mini">兑奖</el-button>
          <el-button @click.native.prevent="updateUserDraw(scope.$index)" type="primary" size="mini">修改用户兑奖信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="text-align : right; float : right; margin-top: 10px;">
      <el-pagination
              @size-change="handlePageSize"
              @current-change="handlePage"
              :current-page="pageNum"
              :page-sizes="[6,10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal">
      </el-pagination>
    </div>
    <!--添加、编辑用户兑奖信息-->
    <el-dialog :visible.sync="userDrawModal" title="用户兑奖信息" width="75%">
      <el-form ref="activity" :model="formAdd" :rules="formAddValidate" label-width="80px" class="demo-ruleForm">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="formAdd.type">
            <el-radio :label="1">地址</el-radio>
            <el-radio :label="2">手机</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="formAdd.mobile" style="width:300px;"  placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item v-if="formAdd.type===1" label="名称" prop="username">
          <el-input v-model="formAdd.username" style="width:300px;"  placeholder="请输入名称"></el-input>
        </el-form-item>
        <!--<el-form-item v-if="formAdd.type===1" label="地区" prop="province">
          <el-select v-model="formAdd.province" placeholder="请选择所属省份" @change="getCity(formAdd.province, 'city', 1)">
            <el-option v-for="(item, index) in province" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-model="formAdd.city" placeholder="请选择所属城市" @change="getCity(formAdd.city, 'district', 1)">
            <el-option v-for="(item, index) in city" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-model="formAdd.district" placeholder="请选择所属区/县">
            <el-option v-for="(item, index) in district" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item v-if="formAdd.type===1" label="详细地址" prop="address">
          <el-input v-model="formAdd.address" style="width:300px;"  placeholder="请输入详细地址（部门单位）"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="addSubmit('formAdd')">提交</el-button>
          <el-button @click="addCancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from "@/axios";
import moment from 'moment'
import EditorText from "@/components/EditorText.vue"
import { isIntNum, getHeaders } from "@/assets/js/common";
export default {
  data() {
    return {
      formItem: {
        status:"",
        type: "",
        keyword: "",
        start_time: "",
        end_time: ""
      },
      ids: [],
      listData: [],
      province: [],
      city: [],
      district: [],
      pageTotal: 0,
      pageNum: 1,
      pageSize: 6,
      userDrawModal: false,
      formAdd: {
        type: 1,
        mobile: "",
        username: "",
        province: "",
        city: "",
        district: "",
        address: ""
      },
      formAddValidate: {
        mobile: [
          {
            required: true,
            message: "手机不能为空",
            trigger: "change"
          }
        ]
      },
    };
  },
  mounted() {
    // 奖品列表
    this.base = JSON.parse(sessionStorage.base);
    this.getHistoryList();
    // 城市
    this.getCity();
  },
  methods: {
    //获取勾选参数
    select(val) {
      let vm = this;
      vm.ids = [];
      for (let i in val) {
        vm.ids.push(val[i].id);
      }
    },
    //当前页数
    handlePage(value) {
      this.pageNum = value;
      this.getHistoryList();
    },
    //每页显示条数
    handlePageSize(value) {
      this.pageSize = value;
      this.getHistoryList();
    },
    //获取中奖记录列表
    getHistoryList() {
      let vm = this;
      axios
        .post("/admin/activity/historyList", {
          activity_id: this.$route.query.activity_id,
          page: this.pageNum,
          limit: this.pageSize,
          type: this.formItem.type,
          keyword: this.formItem.keyword,
          status: this.formItem.status,
          start_time: this.formItem.start_time ? moment(this.formItem.start_time).format('YYYY-MM-DD HH:mm:ss') : "",
          end_time: this.formItem.end_time ? moment(this.formItem.end_time).format('YYYY-MM-DD HH:mm:ss') : "" ,
        })
        .then(response => {
          let status = response.status;
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            vm.pageTotal = result.total;
            vm.listData = result.list;
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$Message.info("网络或服务器异常");
        });
    },
    //搜索
    searchSubmit() {
      this.pageNum = 1;
      this.getHistoryList();
    },
    //返回上一页
    handreturn() {
      this.$router.go(-1);
    },
    // 兑奖
    prize(index) {
      let vm = this;
      axios
        .post("/admin/activity/historyPrize", {
          history_id: this.listData[index].id,
        })
        .then(response => {
          let status = response.status;
          let data = response.data;
          if (data.code == 200) {
            this.$message({
              message: '操作成功!',
              type: 'success',
              onClose: function(msg) {
                vm.getHistoryList();
              }
            });
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$Message.info("网络或服务器异常");
      });
    },
    //获取城市
    getCity(pid = 0, level_cn = '', cont = 0) {
      let vm = this;
      axios
        .post(this.base.domain_name + "/api/common/region", { pid: pid })
        .then(response => {
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            if (level_cn == 'city') {
              if (cont == 1) {
                vm.formAdd.city = "";
                vm.formAdd.district = "";
              }
              vm.city = result.list;
            } else if (level_cn == 'district') {
              if (cont == 1) {
                vm.formAdd.district = "";
              }
              vm.district = result.list;
            } else {
              if (cont == 1) {
                vm.formAdd.city = "";
                vm.formAdd.district = "";
              }
              vm.province = result.list;
            }

          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$Message.error("网络或服务器异常");
        });
    },
    // 添加、编辑用户兑奖信息
    updateUserDraw(index){
      this.userDrawModal = true;
      this.formAdd.history_id = this.listData[index].id;
      this.formAdd.mobile = this.listData[index].draw_data.mobile;
      this.formAdd.username = this.listData[index].draw_data.username;
      this.formAdd.province = this.listData[index].draw_data.province;
      this.formAdd.city = this.listData[index].draw_data.city;
      this.formAdd.district = this.listData[index].draw_data.district;
      this.formAdd.address = this.listData[index].draw_data.address;
    },
    // 弹窗取消
    addCancel() {
      this.userDrawModal = false;
      this.formAdd.mobile = "";
      this.formAdd.username = "";
      this.formAdd.province = "";
      this.formAdd.city = "";
      this.formAdd.district = "";
      this.formAdd.address = "";
      this.getHistoryList();
    },
    // 添加、编辑处理
    addSubmit(name) {
      let vm = this;
      this.$refs.activity.validate(valid => {
        if (valid) {
          axios
            .post("/admin/activity/userDrawInfo", vm.formAdd)
            .then(response => {
              let status = response.status;
              let data = response.data;
              if (data.code == 200) {
                vm.userDrawModal = false;
                vm.formAdd.mobile = "";
                vm.formAdd.username = "";
                vm.formAdd.province = "";
                vm.formAdd.city = "";
                vm.formAdd.district = "";
                vm.formAdd.address = "";
                vm.$message({
                  type: 'success',
                  message: "操作成功!",
                  onClose: function (msg) {
                    vm.getHistoryList();
                  }
                });
              } else {
                vm.$message.error(data.message);
              }
            })
            .catch(error => {
              // console.log(error);
              // vm.$message.error("网络或服务器异常");
            });
        } else {
          // vm.$message.error("Fail!");
        }
      });
    },
    // 导出
    exports() {
      let vm = this;
      let http_url = vm.base.domain_name + '/admin/activity/historyExport';
      let params = {
        activity_id: this.$route.query.activity_id,
        page: this.pageNum,
        limit: this.pageSize,
        type: this.formItem.type,
        keyword: this.formItem.keyword,
        status: this.formItem.status,
        start_time: this.formItem.start_time ? moment(this.formItem.start_time).format('YYYY-MM-DD HH:mm:ss') : "",
        end_time: this.formItem.end_time ? moment(this.formItem.end_time).format('YYYY-MM-DD HH:mm:ss') : "" ,
      };
      window.open(http_url+"?data="+JSON.stringify(params),"_blank");
    },
  }
};
</script>